import React, { Component } from 'react';
import instance from "../utils/axios";
import { Link } from 'react-router-dom';
import { Toast } from 'react-weui';
// import styled from 'styled-components'

import "../css/reg.css"
// const Box = styled.div`
// .box{
//     box-sizing: border-box;
//     padding-left: 10px;
//     padding-right: 10px;
// }

// .input1{
//     appearance: none;
//     -webkit-appearance: none;
//     box-sizing: border-box;
//     border: 1px solid #de3232;
//     border-radius: 5px;
//     width: 100%;
//     min-width: 1px;
//     height: 38px;
//     padding-left: 10px;
//     outline: none;
//     font-size: 18px;      
// }
// .input1::placeholder{
//     color: #a5a5a5;
//     font-size: 18px;
// }

// .login_btn{
//     appearance: none;
//     -webkit-appearance: none;
//     width: 100%;
//     min-width: 1px;
//     height: 38px;
//     border-radius: 5px;
//     background-color: #de3232;
//     color: #ffffff;
//     font-size: 18px;
//     outline: none;
//     text-align: center;
// }
// .link_btn{
//     color: #4d35a6;
//     font-size: 14px;
//     text-decoration: underline;
// }
// `

class Login extends Component {
    state = {
        username: "",
        password: "",
        show: { icon: 'loading', context: '加载中', flag: false }
    }
    // 改变输入框事件
    changeInput = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        })
    }
    // 登入事件
    login = () => {
        instance.post("login", {
            username: this.state.username,
            password: this.state.password
        }).then(data => {
            if (data.userinfo) {
                console.log('on');
                localStorage.setItem("user", JSON.stringify(data.userinfo))
                localStorage.setItem("token", JSON.stringify(data.token))
                this.setState({ show: { icon: 'success-no-circle', context: '登录成功', flag: true } })
                setTimeout(() => {
                    this.props.history.replace("/")
                }, 1500)
            } else {
                this.setState({ show: { icon: 'warn', context: '用户名或者密码错误', flag: true } })
                setTimeout(() => {
                    this.setState({ show: { icon: 'loading', context: '加载中', flag: false } });
                }, 1500)
            }
        })
    }

    render() {
        return (
            <div className="box">
                <div className="m_t25">
                    <input type="text" name='username' onChange={this.changeInput} className="input1" placeholder="用户名" />
                </div>

                <div className="m_t25">
                    <input type="password" name='password' onChange={this.changeInput} className="input1" placeholder="密码" />
                </div>

                <div className="m_t25" >

                    <input type="button" onClick={this.login} className="login_btn" value="登录" />
                </div>

                <div className="m_t15">

                    <div className="tar">
                        <Link to="/sign" className="link_btn">注册</Link>
                    </div>

                </div>
                <Toast icon={this.state.show.icon} show={this.state.show.flag}>{this.state.show.context}</Toast>

            </div>
        )
    }

}

export default Login